<template>
<div v-show="disPlayFlag">
    <div>
      <div class="adzz-pr">
          <div class="filter-container" style="padding-bottom:0px;">
              <el-row :gutter="10">
                  <el-col :span="8">
                      <el-form label-width="70px" label-position='right' size="small">
                          <el-form-item label="岗位名称" prop="ouinfoIdOzOrgOuinfoName">
                              <el-input v-model="listQuery.condition.name.value"></el-input>
                          </el-form-item>
                      </el-form>
                  </el-col>
                  <el-col :span="13" :offset="1"style="float:right;">
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleReset"style="margin-left:10px;">重 置</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="getList">查 询</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleEditStatus('1')">禁 用</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleEditStatus('0')">启 用</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleDelete">删 除</el-button>
                      <el-button size="small" class="filter-item addzz-pr-table-btn" type="primary" @click="handleCreate">添 加</el-button>
                  </el-col>
              </el-row>
          </div>
      </div>
      <div class="addzz-pr-table">
          <el-table ref="multipleTable" :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
              <el-table-column type="selection" width="35">
              </el-table-column>
              <el-table-column align="center" label="状态" min-width="200px" prop="status">
                  <template slot-scope="scope">
                          <span>{{scope.row.status | statusFilter}}</span>
                      </template>
              </el-table-column>
              <el-table-column align="center" label="岗位名称" min-width="200px" prop="name">
                  <template slot-scope="scope">
                          <span>{{scope.row.name}}</span>
                      </template>
              </el-table-column>
          </el-table>
          <div class="pagination-container">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
          </div>
      </div>
        <group-select :displayFlag="groupSelectDisplayFlag" @closeMe="closeGroupSelect"></group-select>
    </div>
</div>
</template>

<script>
import {
  compositeSelect,
  updateItem,
  updateItemByCondition
} from '@/api/systemManage/tabPaneOrgContainJob'
import {
  yesOrNoOptions,
  yesOrNoKeyValue,
  statusOptions,
  statusKeyValue
} from '@/utils/allOptions'
import groupSelect from '@/components/common/groupSelect'

export default {
  components: {
    groupSelect
  },
  directives: {},
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    targetOrgId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // -------Options-----------
      yesOrNoOptions,
      statusOptions,
      // -------Options-----------
      // table list
      tableKey: 0,
      list: null,
      listQuery: {
        rowBounds: {
          offset: 1,
          limit: 20
        },
        condition: {
          ouinfoId: {
            'property': 'ouinfoId',
            'value': '',
            'type': 'EQ'
          },
          name: {
            'property': 'name',
            'value': '',
            'type': 'LIKE'
          }
        },
        fields: [
          'id',
          'ouinfoId',
          'status',
          'name'
        ],
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      },
      total: null,
      listLoading: false,
      // table list
      groupSelectDisplayFlag: false
    }
  },
  // 画面刚进入method
  mounted() {
    if (this.disPlayFlag) {
      this.getList()
    }
  },
  filters: {
    yesOrNoFilter(target) {
      return yesOrNoKeyValue[target]
    },
    statusFilter(target) {
      return statusKeyValue[target]
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          this.listQuery.condition.ouinfoId.value = this.targetOrgId
          this.getList()
        } else {
          this.handleReset()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleCreate() {
      this.groupSelectDisplayFlag = true
    },
    closeGroupSelect(groupId) {
      if (groupId) {
        const data = {
          'ouinfoId': this.targetOrgId
        }
        updateItem(groupId, data).then(() => {
          this.$notify({
            title: '成功',
            message: '岗位登录成功',
            type: 'success',
            duration: 2000
          })
          this.groupSelectDisplayFlag = false
          this.getList()
        })
      } else {
        this.groupSelectDisplayFlag = false
      }
    },
    // 检索条件框回车键按下后，跳转到首页
    handleFilter() {
      this.listQuerypage = 1
      this.getList()
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.limit = val
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
                this.listQuery.rowBounds.limit * (val - 1) + 1
      this.getList()
    },
    handleDelete() {
      const selectArr = this.$refs.multipleTable.selection
      if (selectArr && selectArr.length === 0) {
        return
      }
      this.$confirm(
        '此操作将删除岗位信息, 是否继续?',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          // 等待老马批量更新功能
          // const condition = [];
          // for (let temp of selectArr) {
          //     condition.push({
          //         "ouinfoId": temp.ouinfoId,
          //         "groupId": temp.groupId
          //     })
          // }
          // batchDeleteItem(condition).then(response => {
          //     this.$message({
          //         message: '删除成功。',
          //         type: 'success',
          //     });
          //     this.getList();
          // });
          const conArr = []
          for (const temp of selectArr) {
            conArr.push(temp.id)
          }
          const delCondition = {
            'condition': [{
              'property': 'ouinfoId',
              'value': conArr,
              'type': 'ENUM'
            }],
            'value': {
              'ouinfoId': ''
            }
          }
          updateItemByCondition(delCondition).then(response => {
            this.$message({
              message: '删除成功。',
              type: 'success'
            })
            this.getList()
          })
        })
        .catch(error => {
          console.error(error)
        })
    },
    getList() {
      this.listLoading = true
      const that = this
      compositeSelect(this.listQuery).then(response => {
        const records = response.data.data.records
        const editlist = new Array(0)
        if (response.data.data.count > 0) {
          for (const item of records) {
            const input = {}
            for (const elem of that.listQuery.fields.values()) {
              input[elem] = item[elem]
            }
            editlist.push(input)
          }
        }
        this.list = editlist
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    handleReset() {
      this.listQuery.condition.name.value = ''
      this.getList()
    },
    handleEditStatus(status) {
      const selectArr = this.$refs.multipleTable.selection
      if (selectArr && selectArr.length === 0) {
        return
      }
      const conArr = []
      for (const temp of selectArr) {
        conArr.push(temp.id)
      }
      const delCondition = {
        'condition': [{
          'property': 'id',
          'value': conArr,
          'type': 'ENUM'
        }],
        'value': {
          'status': status
        }
      }
      updateItemByCondition(delCondition).then(response => {
        this.$message({
          message: '岗位状态更新成功。',
          type: 'success'
        })
        this.getList()
      })
    }
  }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}

.el-button--mini,
.el-button--mini.is-round {
    padding: 3px 5px;
}
</style>
